<template>
    <div class="form-container">
        <div class="page-bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/users/role' }">角色管理</el-breadcrumb-item>
                <el-breadcrumb-item>分配权限</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-content">

            <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="form-wraper">
                <el-form-item>
                    <div class="role-name">{{ ruleForm.role_name }}</div>
                </el-form-item>

                <el-form-item>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>已有权限</span>
                        </div>
                        <el-tag v-for="tag in permissions" :key="tag.permission_name" v-if="ruleForm.permissions.indexOf(tag.id) >= 0" type="success" :disable-transitions="false" @close="handleClose(tag, true)" closable>
                            {{tag.permission_name}}
                        </el-tag>
                    </el-card>
                </el-form-item>

                <el-form-item>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>未有权限</span>
                        </div>
                        <el-tag v-for="tag in permissions" :key="tag.permission_name" v-if="unchecked.indexOf(tag.id) >= 0" type="info" :disable-transitions="false" @close="handleClose(tag, false)" closable>
                            {{tag.permission_name}}
                        </el-tag>
                    </el-card>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getPermissions, changePermission } from '@/api/role'
import { getAll } from '@/api/permission'
export default {
  data() {
    return {
      permissions: [],
      ruleForm: {
        id: '',
        role_name: '',
        permissions: []
      },
      unchecked: []
    }
  },
  created() {
    this.loadData(this.$route.params.roleid)
  },
  methods: {
    getPermissions() {
      getAll().then(res => {
        this.permissions = res.data
        for (let i = 0; i < this.permissions.length; i++) {
          if (this.ruleForm.permissions.indexOf(this.permissions[i].id) < 0) {
            this.unchecked.push(this.permissions[i].id)
          }
        }
      })
    },
    loadData(id) {
      getPermissions({ id: id }).then(res => {
        Object.assign(this.ruleForm, res.data)
        this.getPermissions()
      })
    },
    handleClose(tag, flag) {
      if (flag) {
        this.unchecked.push(tag.id)
        this.ruleForm.permissions.splice(
          this.ruleForm.permissions.indexOf(tag.id),
          1
        )
      } else {
        this.ruleForm.permissions.push(tag.id)
        this.unchecked.splice(this.unchecked.indexOf(tag.id), 1)
      }
    },
    submitForm(formName) {
        changePermission(this.ruleForm).then(response => {
          if (response) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.$router.push({ path: '/users/role' })
          }
        })
    },
    cancel() {
      this.$router.push({ path: '/users/role' })
    }
  }
}
</script>

<style lang="less">
.form-container {
  height: auto;
  overflow: hidden;

  .form-content {
    height: auto;
    overflow: hidden;
    padding: 15px;
    background: #fff;
    .form-wraper {
      width: 1000px;
      .line {
        text-align: center;
      }
    }
    .role-name {
      font-size: 24px;
    }
    .el-tag {
      margin: 5px 10px;
    }
  }
}
</style>